<template>
  <div style="height: 0;overflow: hidden;">
    <img ref="imgRef" style="visibility: hidden;" />
  </div>
</template>
<script setup lang="ts">
import 'viewerjs/dist/viewer.css';
import Viewer from 'viewerjs';
import { nextTick, onUnmounted, ref } from 'vue';








const imgRef = ref<HTMLImageElement | null>(null);
let viewer: Viewer | null = null;
const show = (src: string) => {
  nextTick(() => {
    if (viewer) {
      viewer.destroy();
      viewer = null;
    }
    if (imgRef.value) {
      imgRef.value.setAttribute('src', src);
      viewer = new Viewer(imgRef.value, {
        inline: false,
        zIndex: 9999,
        zIndexInline: 9999,
        toolbar: {
          zoomIn: true,
          zoomOut: true,
          oneToOne: false,
          reset: true,
          prev: false,
          next: false,
          rotateLeft: true,
          rotateRight: true,
          flipHorizontal: true,
          flipVertical: true
        }
      });
      viewer?.show();
    }
  });
};
onUnmounted(() => {
  if (viewer) {
    viewer.destroy();
    viewer = null;
  }
})

defineExpose({
  show,
});

</script>
<style scoped>
/* 样式可以根据需要添加 */
</style>
